<template>
  <div class="steps">
    <div class="steps_item" v-for="(item, index) in stepsLabel" :key="index" @click="goNext(index)">
      <div v-show="activeIndex == item.stepIndex || item.stepIndex <= activeIndex ? false : true" :class="['icon']">
        {{ item.stepIndex }}
      </div>
      <div v-show="activeIndex == item.stepIndex || item.stepIndex <= activeIndex ? true : false" :class="['step-active-icon']">
        <img src="@/assets/image/LiveCode/finish_icon.png" alt="" />
      </div>
      <div :class="['title', activeIndex == item.stepIndex || item.stepIndex <= activeIndex ? 'step-active-text' : '']">
        {{ item.title }}
      </div>
      <div :class="['border', 'title', activeIndex == item.stepIndex || item.stepIndex <= activeIndex ? 'step-active-border' : '']" v-if="stepsLabel.length !== index + 1"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineProps } from 'vue'
  const emit = defineEmits(['submit'])
  const touchIndex = ref()
  const props = withDefaults(
    defineProps<{
      stepsLabel: any //步骤title数组
      totalSteps: number // 总的步骤数
      currentStep: number // 当前选中的步骤
    }>(),
    { stepsLabel: [], totalSteps: 3, currentStep: 1 }
  )
  const activeIndex = ref<any>(1)
  const next = (n: any = false) => {
    if (props.stepsLabel.length <= activeIndex.value) {
      activeIndex.value = 1
    } else {
      if (n) {
        activeIndex.value = touchIndex.value
        // console.log(activeIndex.value, '索引')
      } else {
        activeIndex.value++
      }
    }
  }
  const back = () => {
    if (activeIndex.value <= 1) {
      activeIndex.value = 1
    } else {
      activeIndex.value--
    }
  }
  const goNext = (num: number) => {
    // console.log(num + 1, '步骤')
    touchIndex.value = num + 1
    emit('submit', num + 1)
    // next(true)
  }
  defineExpose({ next, activeIndex, back })
</script>

<style lang="scss" scoped>
  .steps {
    display: flex;
    align-items: center;
    &_item {
      display: flex;
      align-items: center;
      cursor: pointer;
      .icon {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        background: #eaeaea;
      }
      .active {
        background: #ff6b00;
      }
      .title {
        white-space: nowrap;
        font-size: 16px;
        font-weight: normal;
        color: #33302d;
        margin: 0 0px 0px 9px;
      }
      .border {
        width: 8vw;
        margin-right: 6px;
        border-top: 1px dashed #d8d8d8;
      }
      .step-active {
        background: #ff6b00;
        &-text {
          color: #ff6b00;
        }
        &-icon {
          width: 30px;
          height: 30px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &-border {
          border-top: 1px dashed #ff6b00;
        }
      }
    }
  }
</style>
